<template>
    <div>
        <van-nav-bar title="客户详情" left-arrow @click-left="$router.push('/myClients')">
      <template #right>
        <img src="../../assets/images/首页按钮.png" alt="" width="50%" @click="$router.push('/home')"/>
      </template>
        </van-nav-bar>

        <div class="cust-header">
            <div class="header-content">
                <img src="../../assets/images/头像.png" alt="">
                <span>{{CustDetailArr.custName}}</span>
            </div>
            <button @click="goEditpage">编辑信息</button>
        </div>  

       <div class="xinxi">
            <div class="imformation">
            <div class="title">
                <img src="../../assets/images/基本信息.png" alt="">
                <span>基本信息</span>
            </div>
        
            <div class="content">
                <div>
                    <span class="left">客户名称</span>
                    <span>{{CustDetailArr.custName}}</span>
                </div>
                <div>
                    <span class="left">联系电话</span>
                    <span> <a href="#">{{CustDetailArr.telephone}}</a></span>
                </div>

                 <div class="tindet">
                     <div>
                    <span class="left">学历</span>
                    <span>{{CustDetailArr.education}}</span>
                </div>
                 <div>
                    <span class="left">性别</span>
                    <span>{{CustDetailArr.sex}}</span>
                </div>
                 <div>
                    <span class="left">年龄</span>
                    <span>{{CustDetailArr.age}}岁</span>
                </div>
                 </div>

                 <div>
                    <span class="left">所属城市</span>
                    <span>{{CustDetailArr.cityName}}</span>
                </div>
                <div>
                    <span class="left">公司名称</span>
                    <span>{{CustDetailArr.company}}</span>
                </div>
                <div class="tindet">
                    <div>
                        <span class="left">职位</span>
                    <span>{{CustDetailArr.position}}</span>
                    </div>
                </div>

                <div>
                    <span class="left">录入时间</span>
                    <span>{{CustDetailArr.createTime}}</span>
                </div>
            </div>

        </div>
       </div>

    </div>
</template>

<script>
import {CustDetail} from '../../request/api'
export default {
    data () {
        return {
        CustDetailArr:[]
 
        }
    },
    created(){
        // console.log(this.$route.query.id);
        CustDetail({
            id:this.$route.query.id
        }).then(res=>{
            // console.log(res);
            if(res.errCode==0){
                this.CustDetailArr=res.data
                // console.log(this.CustDetailArr);
            }
        })
    },
    methods:{
        goEditpage(){
            this.$router.push({
                path:"/edit",
                query:{
                    id:this.CustDetailArr.id
                }
            })
        }
    }
}
</script>
 
<style lang = "less" scoped>
/deep/.van-nav-bar {
  background-color: #003399;

  .van-nav-bar__title,
  .van-icon-arrow-left::before {
    color: #fff;
  }
  .van-nav-bar__text {
    color: #fff;
  }
   .van-nav-bar__right{
       padding: 0;
       
   }

 
}

/deep/[class*=van-hairline]::after{
    border:0
}

.cust-header{
    width: 100%;
    height: 120px;
    background-color: #003399;
    display: flex;
    justify-content: space-between;
    position: relative;
    button{
        width: 100px;
        height: 30px;
        background-color: rgba(255, 255, 255, .3);
        border: 0;
        border-radius: 15px;
        position: absolute;
        right: -10px;
        top:50%;
        margin-top: -25px;
        color: #efefef;
        font-size: 12px;
        user-select: none;
    }
    .header-content{
        width: 100%;
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 14px;
        padding-left:20px;
        margin-top: -20px;
        img{
            width:15%;
            margin-right: 20px;
        }
    }
}
.xinxi{
    width: 100%;
    padding: 0 10px;
     position: absolute;
    top: 135px;
    left: 0;
    box-sizing: border-box;
}
.imformation{
    width: 100%;
    height: 90vh;
    background:url('../../assets/images/底纹.png')center bottom;
    padding: 20px 0;
    box-sizing: border-box;
    border-radius: 6px 6px 0 0 ;
   
    .title{
        width: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 10px;
        border-bottom: 1px dashed #efefef;
        img{
            width: 5%;
            margin-right: 10px;
        }

        span{
            font-size: 14px;
            font-weight: bold;
        }
    }

    .content{
        div{
            padding: 10px;
          .left{
            color: #999;
            margin-right: 15px;
        }  
        }
        .tindet{
            padding-top:0 ;
            text-indent: 1.3rem;
        }
        
    }
}
</style>